{extend name="public/container"}
{block name="content"}
<div id="myApp" v-cloak>
    <div class="douxue-filter padding-10 mb-20" style="margin-bottom:20px">
        <el-form :inline="true" :model="where" size="mini" class="flex">
            <div class="flex flex-between">
                <el-form-item v-if="!disable_organ" size="mini">
                    <el-select
                    :clearable=true
                    placeholder="所属{:lang('Organ')}"
                    @change="doSwitchOrgan"
                    :disabled="organs.length==0"
                    v-model="where.org_id">
                        <el-option v-for="item in organs" :label="item.organ_name" :key="item.id" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item v-if="!disable_school">
                    <el-select
                    :clearable=true
                    placeholder="所属{:lang('School')}"
                    v-model="where.school_id"
                    :disabled="schools.length==0"
                    filterable>
                        <el-option v-for="item in schools" :label="item.school_name" :key="item.id" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="where.keyword" placeholder="手机号/姓名">
                        <el-button slot="append" size="small" type="success" @click="renderCharts()" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div class="padding-10 mb-20">
        <div id="consumeDailyChart" style="width:100%; height: 500px;">Loading...</div>
    </div>

    <div class="padding-10 mb-20">
        <div id="consumeMonthlyChart" style="width:100%; height: 500px;">Loading...</div>
    </div>

    <div class="padding-10">
        <div id="rechargeMonthlyChart" style="width:100%; height: 500px;">Loading...</div>
    </div>
</div>
{/block}

{block name="script"}
<script src="{__STATIC_PATH}js/echarts/5.1.2/echarts.min.js"></script>
<script>
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                rowsCount: 0,
                rows: [],
                where: {
                    org_id:default_org_id > 0 ? default_org_id : '',
                    school_id:default_school_id > 0 ? default_school_id : '',
                    keyword: '',
                    status:'',
                    order_type:1,
                },
                loading:false,
                organs: [],
                schools: [],
                disable_organ: default_org_id > 0 ? true : false,
                disable_school: default_school_id > 0 ? true : false,
            }
        },
        methods: {
            doLoadOrgans () {
                axios.get(Url({c:'teachaffair.organ',a:'get_all' , q:{org_id:default_org_id}}))
                    .then(res => {
                        this.organs = res.data.data
                    })
            },
            doSwitchOrgan (org_id) {
                this.where.school_id = ''
                this.doLoadSchools(org_id)
            },
            doLoadSchools (org_id) {
                axios.get(Url({c:'supervision.school',a:'get_all' , q:{org_id:org_id}}))
                    .then(res => {
                        this.schools = res.data.data
                    })
            },
            /** 消费日度统计 */
            consumeDailyChart () {
                axios.get(Url({a:'get_consume_daily_chart' , q:this.where}))
                .then(res => {
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: res.data.data.title
                        },
                        tooltip: {},
                        legend: {
                            data:[res.data.data.title]
                        },
                        xAxis: {
                            data: res.data.data.xAxis
                        },
                        yAxis: {},
                        series: [{
                            name: '日消费额',
                            type: 'bar',
                            data: res.data.data.seriesData
                        }]
                    };

                    var myChart = echarts.init(document.getElementById('consumeDailyChart'));
                    myChart.setOption(option);
                })
            },
            /** 消费月度统计 */
            consumeMonthlyChart () {
                axios.get(Url({a:'get_consume_monthly_chart' , q:this.where}))
                .then(res => {
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: res.data.data.title
                        },
                        tooltip: {},
                        legend: {
                            data:[res.data.data.title]
                        },
                        xAxis: {
                            data: res.data.data.xAxis
                        },
                        yAxis: {},
                        series: [{
                            name: '月消费额',
                            type: 'bar',
                            data: res.data.data.seriesData
                        }]
                    };

                    var myChart = echarts.init(document.getElementById('consumeMonthlyChart'));
                    myChart.setOption(option);
                })
            },
            /** 充值月度统计 */
            rechargeMonthlyChart () {
                axios.get(Url({a:'get_recharge_monthly_chart' , q:this.where}))
                .then(res => {
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: res.data.data.title
                        },
                        tooltip: {},
                        legend: {
                            data:[res.data.data.title]
                        },
                        xAxis: {
                            data: res.data.data.xAxis
                        },
                        yAxis: {},
                        series: [{
                            name: '月充值额',
                            type: 'bar',
                            data: res.data.data.seriesData
                        }]
                    };

                    var myChart = echarts.init(document.getElementById('rechargeMonthlyChart'));
                    myChart.setOption(option);
                })
            },
            renderCharts() {
                this.consumeDailyChart()
                this.consumeMonthlyChart()
                this.rechargeMonthlyChart()
            }
        },
        mounted(){
            this.renderCharts()

            this.doLoadOrgans()
            if ( default_org_id > 0 || this.where.org_id > 0 ) {
                org_id = default_org_id || this.where.org_id
                this.doLoadSchools(org_id)
            }
        }
    })
</script>
{/block}